:root{
    --frame-header-height: 50px;
}

.frame-header-container{
    position: absolute;
    height: var(--frame-header-height);
    background-color:rgba(255, 255, 255, 1);
    box-shadow: 0 2px 5px rgb(0 0 0 / 15%);
    top: 0;
    left: 0;
    z-index: 10;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
    padding: 0 10px;
}
.frame-header-container .frame-header-left{
    display: flex;
    flex-direction: row;
    align-items: center;
    
}

.frame-header-logo{
    display: flex;
    align-items: center;
}

.frame-header-logo .frame-header-logo-title{
    font-size: 1.2rem;
    padding-left: 10px;
    padding-right: 10px;
}

.frame-header-container .logo{
    height: calc( var(--frame-header-height ) - 5px );
    width: calc( var(--frame-header-height ) - 5px );
}

.frame-body-container{
    width: 100%;
    height: calc(100vh - var(--frame-header-height));
    overflow-y: auto;
    margin-top: var(--frame-header-height);
    
}

.frame-body-container.sider{
    padding-left: 300px;
}


.frame-sider{
    position: absolute;
    overflow: auto;
    width: 300px;
    height: calc(100vh - var(--frame-header-height));
    top:  var(--frame-header-height);
}

.frame-sider.hide{
    display: none;
}
